<template>
    <div class="fxdate-weather">
        <div class="chart-container" ref="chartContainer"></div>
    </div>
</template>

<script>
import axios from 'axios'
//从图标库复制所需组件
import * as echarts from 'echarts/core';
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  MarkLineComponent,
  MarkPointComponent
} from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  MarkLineComponent,
  MarkPointComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition
]);

import { API_7DAY,KEY } from '@/common/constrant'

import dayjs from 'dayjs'

export default {
    data(){
        return{
            daily:[], // 存储API返回的原始天气数据
            dailyWeatherData:{
                fxDate:[], // 存储日期数据
                tempMax:[], // 存储最高温度数据
                tempMin:[] // 存储最低温度数据
            }
        }
    },
    methods: {
        getData(){
            // 调用和风天气API获取7天天气预报数据
            axios.get(API_7DAY,{
                params:{
                    key: KEY,
                    location: this.location
                }
            }).then((res) => {
                this.daily = res.data.daily;
                // 处理API返回的数据，分别存储日期、最高温度和最低温度
                this.daily.forEach(element => {
                    this.dailyWeatherData.fxDate.push(element.fxDate)
                    this.dailyWeatherData.tempMax.push(element.tempMax)
                    this.dailyWeatherData.tempMin.push(element.tempMin)
                });
                //需要处理fxDate这个数组，把数组中的每个值都通过格式化,显示YYYY-MM-DD
                let fxDateDD = []
                this.dailyWeatherData.fxDate.forEach(element => {
                    fxDateDD.push(dayjs(element).format("DD"))
                });
                this.initChart(fxDateDD,this.dailyWeatherData.tempMax,this.dailyWeatherData.tempMin)
                // 初始化echarts图表
                this.initChart(this.dailyWeatherData.fxDate,
                               this.dailyWeatherData.tempMax,
                               this.dailyWeatherData.tempMin)
            })
        },
        initChart(xAxisData, tempMax, tempMin) {
            // 获取图表DOM容器
            var chartDom = this.$refs.chartContainer;
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                // 图表标题配置
                title: {
                    text: '未来7天气温预报'
                },
                // x轴配置
                xAxis: {
                    type: 'category',
                    data: xAxisData,
                    
                },
                // y轴配置
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} °C' // 显示温度单位
                    }
                },
                series: [
                    {
                        name: '最高气温',
                        type: 'line',
                        data: tempMax,
                        itemStyle: {
                            color: '#FF6B6B' // 最高温度线颜色
                        }
                    },
                    {
                        name: '最低气温',
                        type: 'line',
                        data: tempMin,
                        itemStyle: {
                            color: '#4ECDC4' // 最低温度线颜色
                        }
                    }
                ]
            };
            
            option && myChart.setOption(option);
        },
    },
    mounted(){
        this.getData();
    },
    watch:{
        // 监听location变化，重新获取数据
        location:function(){
            this.getData();
        }
    },
    computed:{
        // 从vuex获取当前选择的地点ID
        location:function(){
            return this.$store.state.location.id
        }
    }

}
</script>

<style scoped>
.chart-container{
  height: 20rem;
}
</style>